<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-header">
        <h2>要跳转登录</h2>
        <p>重新定义短网址+活码+智能跳转程序</p>
      </div>
      <div class="login-form">
          <el-tabs>
            <el-tab-pane label="密码登录">
              <el-form :model="passwordLoginForm" :rules="passwordLoginFormRules" ref="passwordLoginFormRef" @keyup.enter="userLogin">
                <el-form-item prop="username">
                  <el-input placeholder="请输入邮箱或手机号" v-model.trim="passwordLoginForm.username" clearable></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input minlength="6" maxlength="12" placeholder="请输入您的密码" type="password" v-model="passwordLoginForm.password"></el-input>
                </el-form-item>
                <div class="submit-btn-box">
                  <el-button :loading="isLogging" type="primary" @click="userLogin">登录</el-button>
                </div>
                <div class="login-form-bottom">
                  <el-checkbox v-model="iAgree">记住密码</el-checkbox>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { encryptedData } from '@/utils/encrypted'
import { login } from '@/axios/userRequest'

const router = useRouter()
const store = useStore()
const { proxy } = getCurrentInstance()

const passwordLoginFormRules = reactive({
  username: [{ required: true, message: '账号不能为空' }],
  password: [{ required: true, message: '密码不能为空' }],
})

const passwordLoginForm = reactive({
  username: localStorage.getItem('rememberMe') ? JSON.parse(localStorage.getItem('rememberMe')).username : '19530786726',
  password: localStorage.getItem('rememberMe') ? JSON.parse(localStorage.getItem('rememberMe')).password : 'ghhcdl520'
})

let iAgree = ref(Boolean(localStorage.getItem('rememberMe')))
let isLogging = ref(false)

const userLogin = () => {
  proxy.$refs.passwordLoginFormRef.validate(async valid => {
    if (valid) {
      isLogging.value = true
      const res = await login({ key: encryptedData(passwordLoginForm) })
      if(res.code === 0){
        store.commit('userStore/changeStoreState', ['isLogin',true])
        iAgree.value ? localStorage.setItem('rememberMe', JSON.stringify(passwordLoginForm)) : localStorage.removeItem('rememberMe')
        localStorage.setItem('userCenter_token', res.data[0])
        await router.replace('/user-center')
        proxy.$message.success({ message:res.msg,duration:1500 })
      }else{
        proxy.$message.error(res.msg)
      }
      isLogging.value = false
    }
  })
}
</script>

<style lang="less" scoped>
.login-container{
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E9E9E9;
  .login-content {
    max-width: 400px;
    .login-header{
      margin-bottom: 10px;
      text-align: center;
      line-height: 28px;
      h2, p {
        margin: 0;
      }
      h2 {
        font-size: 32px;
        margin-bottom: 8px;
        font-weight: 500;
        color: @title;
        line-height: 45px;
      }
      p {
        font-size: 16px;
        font-weight: 400;
        color: @subtitle;
        line-height: 22px;
      }
    }
    .login-form {
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 45px 5px;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-radius: 8px;
        .el-tabs{
          padding: 0 20px;
          box-sizing: border-box;
          &:deep(.el-tabs__header){
            margin-bottom: 40px;
          }
          .el-tabs__content{
            .el-form{
              padding: 0 12px;
              .el-form-item {
                &:deep(.el-input){
                  .el-input__inner {
                    border-color: #E0E2E5;
                    background-color: #F3F5FA;
                    color: @title;

                    &::placeholder {
                      color: #C1C4CB;
                    }
                  }
                }
              }
              .login-form-bottom {
                width: 100%;
                color: #909399;
                margin-bottom: 8px;
              }

              .submit-btn-box {
                margin-bottom: 20px;
                .el-button {
                  width: 100%;
                }
              }
            }
          }
        }
      }
  }
}
</style>
